<template>
    <div class="starts-wrappe">
        <span :class="['iconfont icon-start', {active: startNum >= 1}]"></span>
        <span :class="['iconfont icon-start', {active: startNum >= 2}]"></span>
        <span :class="['iconfont icon-start', {active: startNum >= 3}]"></span>
        <span :class="['iconfont icon-start', {active: startNum >= 4}]"></span>
        <span :class="['iconfont icon-start', {active: startNum >= 5}]"></span>
    </div>
</template>

<script>
export default {
    name: 'Starts',
    props: {
        startNum: Number
    }
}
</script>

<style lang="scss" scoped>
@import '~styles/variables.scss'
.start-wrapper {
    color: #ccc;
}
</style>